<template>

    <div>
        <h3 style="padding: 3px;">录制内容</h3>
        <Row>
            <Col span="24" class="tool">
           <!-- <Button type="default" @click="">合并</Button>
            <Button type="default" @click="">下载</Button>-->
            </Col>
        </Row>
        <Row>
            <Col span="24" class="data-table">
            <Table border :columns="listColumn" :data="listData"></Table>
            </Col>
        </Row>
        <Modal v-model="showVideo" title="视频" width="720"
               height="500" :styles="{top: '20px'}" :closable="false">
            <video-player class="vjs-custom-skin"
                          :options="playerOptions"
                          ref="videoPlayer">
            </video-player>
            <div slot="footer">
                <Button type="error" size="large" @click="cancle">取消</Button>
            </div>
        </Modal>
    </div>

</template>
<script>
    import {getReplayUrls, deleteReplayVideo} from '../../api/api'
    export default {
        computed:{
            player() {
                return this.$refs.videoPlayer.player
            }
        },
        data(){
            return {
                urlPlaying:'xxx',
                showVideo: false,
                liveRoomId: this.$store.state.operatedLiveRoomId,
                listColumn: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '文件大小',
                        key: 'fileSize',
                    },
                    {
                        title: '时长',
                        key: 'duration'
                    },
                    {
                        title: '格式',
                        key: 'fileFormat'
                    },
                    {
                        title: '录制开始时间',
                        key: 'startTime'
                    },
                    {
                        title: '录制结束时间',
                        key: 'endTime',
                    },
                    {
                        title: '文件地址',
                        key: 'videoUrl',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.videoPlayer(params.index)
                                        }
                                    }
                                }, '播放'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.delete(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                listData: [],
                playerOptions: {
                    // videojs and plugin options
                    sources: [{
                        withCredentials: false,
                        type: "application/x-mpegURL",
                        src: "http://1252870063.vod2.myqcloud.com/ea94c421vodgzp1252870063/984e56cd9031868223359912926/playlist_eof.m3u8"
                    }],
                    autoPlay: false,
                    controlBar: {
                        timeDivider: false,
                        durationDisplay: false
                    },
                    flash: { hls: { withCredentials: false }},
                    html5: { hls: { withCredentials: false }},
                    //poster: "/static/images/author-5.jpg"
                }
            }

        },
        methods: {
            sort(){

            },
            getListData(){
                let params = {
                    liveRoomId: this.liveRoomId
                }
                getReplayUrls(params).then(res => {
                    this.listData = res.list
                })
            },
            videoPlayer(index){
                this.showVideo = true
                this.player.pause()
                this.player.src(this.listData[index].videoUrl)
                this.player.load()
                this.player.play()
            },
            cancle(){
                this.showVideo = false
                this.player.pause()
            },
            delete(index){
                this.$Modal.confirm({
                    title: '删除视频',
                    content: '<p>视频删除后不可恢复，确定删除吗？</p>',
                    onOk: () => {
                        let ids = []
                        ids.push(this.listData[index].liveRecordId)
                        deleteReplayVideo(ids).then(res => {
                            if (res.code == 0){
                                this.getListData()
                            }
                        })
                    },
                    onCancel: () => {
                    }
                });
            }
        },
        mounted(){
            this.getListData()
        }
    }
</script>
<style scoped>
    .tool {
        margin-top: 15px;
    }

    .data-table {
        margin-top: 10px;
    }
</style>